<template>
  <div align="center">
    <h1>欢迎注册</h1>
    <div style="margin: 20px" />
    <el-form
      ref="register"
      :label-position="labelPosition"
      label-width="100px"
      :model="register"
      style="max-width: 460px; margin-top: 20px"
    >
      <el-form-item prop="nickName" label="昵称">
        <el-input v-model="register.nickName" />
      </el-form-item>
      <el-form-item prop="username" label="用户名">
        <el-input v-model="register.username" />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="register.password"
          show-password
        />
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="register.repassword"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          style="max-width: 460px; width: 400px"
          @click="userregister"
          >注册</el-button
        >
      </el-form-item>
      <el-form-item
        ><el-button type="" @click="$router.push('/login')"
          >前往登录 >>
        </el-button></el-form-item
      >
    </el-form>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "Register",
  data() {
    return {
      labelPosition: "right", // 默认值
      register: {},
    };
  },
  methods: {
    userregister() {
      this.$refs["register"].validate((valiad) => {
        if (valiad) {
          if (this.register.nickName == null || this.register.nickName == "") {
            this.$message.error("请输入昵称");
            return;
          }
          if (this.register.username == null || this.register.username == "") {
            this.$message.error("请输入用户名");
            return;
          }
          if (this.register.password == null || this.register.password == "") {
            this.$message.error("请输入密码");
            return;
          }
          if (
            this.register.repassword == null ||
            this.register.repassword == ""
          ) {
            this.$message.error("请再次输入密码");
            return;
          }
          if (this.register.password != this.register.repassword) {
            this.$message.error("两次输入的密码不一致");
            return;
          }
        }
        request.post("/user/register", this.register).then((res) => {
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "注册成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      });
    },
  },
};
</script>
<style scoped></style>
